<template>
  <div class="sale-container flex-column">
    <div class="title">
      销售统计
    </div>
    <div class="stat-data ">
      <div class="stat-item flex-column-center" v-for="item in dataList">
        <div class="r-1">
          <span :style="{color:item.color}">{{item.value}}</span>
          <span>{{item.unit}}</span>
        </div>
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'saleStat',
    props:{
      saleStatisticsTableVO:{
        type:Object,
        default:{}
      }
    },
    data(){
      return{
        dataList:[
          {
            name:'客户数',
            value:0,
            unit:'个',
            color:'#00EEFF'
          },{
            name:'合同价',
            value:0,
            unit:'万元',
            color:'#16B1FD'
          },{
            name:'含税价',
            value:0,
            unit:'万元',
            color:'#F89E86'
          },{
            name:'实际产值',
            value:0,
            unit:'万元',
            color:'#9CC6FF'
          },{
            name:'含税价',
            value:0,
            unit:'万元',
            color:'#F89E86'
          },{
            name:'实际产值',
            value:0,
            unit:'万元',
            color:'#9CC6FF'
          }
        ]
      }
    },
    methods:{
      setOption(){
        if(!_.isEmpty(this.saleStatisticsTableVO)){
          this.dataList[0].value = this.saleStatisticsTableVO.customNumber;
          this.dataList[1].value = this.saleStatisticsTableVO.contractPrice;
          this.dataList[2].value = this.saleStatisticsTableVO.includTaxPrice;
          this.dataList[3].value = this.saleStatisticsTableVO.actualValue;
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .sale-container{
    padding: 14px 0;
    .title{
      background: url("../../assets/imgs/sale_stat_bg.png")no-repeat;
      background-size: 100% 100%;
      font-family: title-font;
      font-size: 44px;
      color: #8EBBFE;
      width: 236px;
      height: 78px;
      line-height: 78px;
      padding-left: 30px;
      margin-bottom: 60px;
    }
    .stat-data{
      width: 100%;
      display: grid;
      gap: 63px;
      grid-template-columns: repeat(2,1fr);
      .stat-item{
        background: url("../../assets/imgs/sale_data_bg.png")no-repeat;
        background-size: 100% 100%;
        width: 530px;
        height: 228px;
        justify-content: center;
        color: #E4FDFF;
        font-size: 34px;
        font-weight: bold;
        .r-1{
          margin-top: 30px;
          line-height: 65px;
          span:nth-child(1){
            font-size: 84px;
            font-family: number-font;
            font-style: italic;
            font-weight: normal;
          }
          span:nth-child(2){
            font-size: 34px;
            margin-left: 10px;
            font-weight: bolder;
          }
        }
      }
    }
  }
</style>
